<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { CaretTop, CaretBottom, Warning } from '@element-plus/icons-vue'
  import * as echarts from 'echarts'

  let list = ref([
    { id: 0, title: '地府总数（个）', num: 409378862, compare: 15, tips: '地府目前存在的亡魂', colors: ['rgb(255, 0, 135)', 'rgb(135, 0, 157)', 'rgb(255, 191, 0)', 'rgb(224, 62, 76)'], data: [[140,232,101,264,90,340,250],[120, 282, 111, 234, 220, 340, 310]] },
    { id: 1, title: '今日入境（个）', num: 359111, compare: -15, tips: '今日死亡的生灵', colors: ['rgb(55, 162, 255)', 'rgb(116, 21, 219)', 'rgb(255, 0, 135)', 'rgb(135, 0, 157)'], data: [[635,274,382,183,392,135,256],[102,120,284,128,356,123,521]] },
    { id: 2, title: '今日出境（个）', num: 483612, compare: 15, tips: '今日投胎转世的亡魂', colors: ['rgb(128, 255, 165)', 'rgb(1, 191, 236)', 'rgb(0, 221, 255)', 'rgb(0, 221, 255)'], data: [[122,322,423,123,289,275,384],[283,217,173,482,106,289,210]] },
    { id: 3, title: '孤魂野鬼（个）', num: 1234512, compare: -12, tips: '在外未回地府的亡魂', colors: ['rgb(0, 221, 255)', 'rgb(0, 221, 255)', 'rgb(55, 162, 255)', 'rgb(116, 21, 219)'], data: [[201,289,215,382,222,213,490],[321,351,189,123,143,163,364]] },
    { id: 4, title: '管理人员（位）', num: 34, compare: 10, tips: '在职管理人员', colors: ['rgb(55, 162, 255)', 'rgb(116, 21, 219)', 'rgb(128, 255, 165)', 'rgb(1, 191, 236)'], data: [[387,298,184,289,187,293,392],[209,293,180,301,200,133,144]] },
    { id: 5, title: '总资产（万亿）', num: 97352403, compare: 15, tips: '地府目前可支出的冥币', colors: ['rgb(255, 0, 135)', 'rgb(135, 0, 157)', 'rgb(0, 221, 255)', 'rgb(0, 221, 255)'], data: [[531,243,134,192,291,320,90],[190,180,287,173,397,209,189]] }
  ])
  
  // 绘制图标
  const myEchartBroken = () => {
    list.value.forEach((item, index) => {
      let mychart = echarts.init(document.getElementById("charts-" + index) as HTMLElement, 'dark')
      mychart.setOption({
        backgroundColor: '#1d3043',
        grid: {
          top: '10%',
          left: '0%',
          right: '0%',
          bottom: '0%',
          show: false
        },
        xAxis:{
          show: false,
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
          show: false,
        },
        series: [
          {
            name: 'Line 1',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: { width: 0 },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: item.colors[0] },
                { offset: 1, color: item.colors[1] }
              ])
            },
            emphasis: { focus: 'series' },
            data: item.data[0]
          },
          {
            name: 'Line 2',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {width: 0},
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: item.colors[2] },
                { offset: 1, color: item.colors[3] }
              ])
            },
            emphasis: { focus: 'series' },
            data: item.data[1]
          },
        ]
      })
    })
  }
  onMounted(() => {
    myEchartBroken()
  })
</script>

<template>
  <el-col :span="4" v-for="item,index in list" :key="item.id">
    <div class="z-col">
      <div class="statistic-card" :class="'home-block-' + index">
        <el-statistic :value="item.num">
          <template #title>
            <div style="display: inline-flex; align-items: center">
              <span>{{ item.title }}</span>
              <el-tooltip effect="dark" :content="item.tips" placement="top">
                <el-icon style="margin-left: 4px" :size="14"><Warning /></el-icon>
              </el-tooltip>
            </div>
          </template>
        </el-statistic>
        <div class="statistic-footer" v-if="item.compare !== 0">
          <div class="footer-item">
            <span>相较于昨天</span>
            <span class="green" v-if="item.compare > 0">{{ item.compare }}%<el-icon><CaretTop /></el-icon></span>
            <span class="red" v-if="item.compare < 0">{{ item.compare }}%<el-icon><CaretBottom /></el-icon></span>
          </div>
        </div>
      </div>
      <div class="statistic-echarts" :id="'charts-' + index"></div>
    </div>
  </el-col>
</template>

<style lang="scss" scoped>
  :global(h2#card-usage ~ .example .example-showcase) {
    background-color: var(--el-fill-color) !important;
  }

  .z-col {
    height: 176px;
    display: flex;
    flex-direction: column;
  }

  .el-statistic {
    --el-statistic-content-font-size: 36px;
  }

  .statistic-card {
    padding: 20px 20px 0;
  }

  .statistic-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--el-text-color-regular);
    margin-top: 10px;
  }

  .statistic-footer .footer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .statistic-footer .footer-item span:last-child {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
  }
  .statistic-echarts {
    flex: 1;
  }

  .green { color: var(--el-color-success); }
  .red { color: var(--el-color-error); }
</style>